<template>
  <div class="page">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" /></button>
        <h3>设置排班</h3>
      </div>
      <!-- Tab 切换 -->
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: activeTab === index }]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
    </div>
    <div class="context">
    <!-- 区域1 -->
    <div class="section1">
      <!-- 1.2 设定上下班时间 -->
      <div class="time-card">
        <div class="starttime">
          <div class="time-box">
            <span class="chooseStartTime">上班时间</span>
            <div class="input-box">
              <span class="chooseEndTime">08:00</span>
              <img src="@/assets/xiangmujindu/xzsj.png" alt="时间选择" />
            </div>
          </div>
          <div class="time-box">
            <span class="chooseStartTime">下班时间</span>
            <div class="input-box">
              <span class="chooseEndTime">18:00</span>
              <img src="@/assets/xiangmujindu/xzsj.png" alt="时间选择" />
            </div>
          </div>
        </div>
      </div>

      <!-- 1.3 选择成员 -->
      <div class="setting-card">
        <h3>常用设置</h3>
        <div class="member-grid">
          <div
            v-for="(member, index) in members"
            :key="index"
            :class="['member-item', { selected: member.selected }]"
            @click="toggleMember(index)"
          >
            {{ member.name }}
          </div>
        </div>
      </div>
    </div>

    <!-- 区域2 -->
    <div class="section2">
      <button class="submit-btn" @click="goToPage('paibanwancheng')">提交排班计划</button>
    </div>

  </div>
  <!-- 提醒 -->
    <div v-if="qdSureToastVisi" style="position: fixed;top: 0;left: 0; width: 100vw;height: 100vh;">
      <p style="background-color: #000;color: #fff; margin: 70% auto;width: 80vw;text-align: center;padding: 10px 20px;border-radius: 10px;">
        提交成功
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      members: [
        { name: '早9晚6', selected: false },
        { name: '早10晚7', selected: false }
      ],
      selectedMembersText: '', // 记录选中的成员名称
      qdSureToastVisi: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      // this.$router.push({ name: 'paigongpaiban', params: {id: 1} })
    },
    toggleMember(index) {
      this.members.map(item => item.selected = false)
      const member = this.members[index];
      member.selected = !member.selected;

      if (member.selected) {
        // 如果选中，将成员添加到输入框中
        this.addToSelectedMembersText(member.name);
      } else {
        // 如果取消选中，从输入框中删除成员
        this.removeFromSelectedMembersText(member.name);
      }
    },
    addToSelectedMembersText(name) {
      const names = this.selectedMembersText.split(',').filter(Boolean); // 分割已有的成员
      names.push(name); // 添加新成员
      this.selectedMembersText = names.join(','); // 更新输入框
    },
    removeFromSelectedMembersText(name) {
      const names = this.selectedMembersText.split(',').filter(Boolean); // 分割已有的成员
      this.selectedMembersText = names.filter((item) => item !== name).join(','); // 删除指定成员并更新
    },
    goToPage (page) {
      this.qdSureToastVisi = true;
      setTimeout(() => {
        this.qdSureToastVisi = false
        this.Index = -1

        this.$router.go(-1);
        // this.$router.push({ name: 'paigongpaiban', params: {id: 1} })
      }, 2000);
    } 
  },
};
</script>




<style scoped>

.context {
  background-color: #F4F5F9;
  font-size: 13px;
  padding: 10px;
  height: 100%;
  color:#474747;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
    left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.context {
  background-color: #F4F5F9;
  font-size: 13px;
  padding: 10px;
  height: 100%;
}
/* 区域1 样式 */
.section1 {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
}


/* 卡片样式 */
.time-card {
  margin-bottom: 13px;
}
.time-card h2 {
  margin: 0 0 10px;
  font-size: 14px;
}

/* 卡片样式 */
.setting-card {
  margin-top: 20px;
}
.setting-card h2 {
  margin: 0 0 10px;
  font-size: 14px;
}

/* 时间选择框样式 */
.time-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 13px;
}
.chooseStartTime {
  color: #9d9e9f;
  padding:3px 0px;
}
.input-box {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.chooseEndTime {
  flex: 1;
  font-weight: bold;
}
.input-box img {
  width: 20px;
  height: 20px;
}

/* 搜索框样式 */
.search-input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  margin: 5px 0;
  box-sizing: border-box;
}

/* 成员网格样式 */
.member-grid {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.member-item {
  text-align: center;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #F4F5F9;
  cursor: pointer;
}
.member-item.selected {
  background-color: #f0f6e8;
  color: #7e9b4f;
}

/* 区域2 样式 */
.section2 {
  margin: 20px 10px;  
  text-align: center;
}
.submit-btn {
  background-color: #98c355;
  color: white;
  border: none;
  padding: 16px 20px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
}
</style>